<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>界面布局-浮动</title>
    <style>
        #div1{
            width: 400px;
            border: solid 1px red;
            margin: 0 auto;
            /*方式二 使用overflow 的hidden*/
            overflow: hidden;
        }
        .son1{
            float: left;
            width: 98px;
            height: 98px;
            border: dashed 1px;
        }
        .person{
            width: 408px;
            margin: 0 auto;
            border: solid 1px blue;
            overflow: hidden;
        }
        img{
            width: 98px;
            height: 98px;
            border:solid 1px;
            border-radius: 50%;
            float:left;
        }
        p{
            float: right;
            width: 300px;
            margin: 0;
            margin-left: 8px;
        }


    </style>
</head>
<body>

    <div id="div1">
        <div class="son1"></div>
        <div class="son1"></div>
        <div class="son1"></div>
        <div class="son1"></div>
<!--       方式1 用clear-->
<!--        <div style="clear: both"></div>-->
    </div>
    <div class="person">
        <img src="1.png" alt="找不到该图片">
        <p>Altium Designer 路演 全新PCB设计与“智”造——杭州站 点击报名 新一代电子设计的强大工具 Altium软件赋予创客、 工程师以及电子产品设计师们以强大的能力去创造更智能、 更安全、更互联的世界 ...</p>
    </div>
    <div class="person">
        <img src="1.png" alt="找不到该图片">
        <p>Altium Designer 路演 全新PCB设计与“智”造——杭州站 点击报名 新一代电子设计的强大工具 Altium软件赋予创客、 工程师以及电子产品设计师们以强大的能力去创造更智能、 更安全、更互联的世界 ...</p>
    </div>

</body>
</html>